/**
 * 工作台页面逻辑
 *
 * @版权所有 rem.studio
 */
import React, { PureComponent } from 'react';
import { Card, Col, List, Row, Typography } from 'antd';
import 'react-chat-widget/lib/styles.css';
import { connect } from 'dva';
import BaseComponent from '@/components/BaseComponent';
import styled from 'styled-components';
import moment from "moment";
import ArticlePreviewView from "@/pages/SystemInit/ArticleSetting/PreviewView";
import ArticleListView from "@/pages/SystemInit/ArticleSetting/ArticleListView";

const WorkbenchContent = styled.div`
  width: 100%;
  min-height: calc(100vh - 64px - 40px - 93px - 46px);
  background-color: #ffffff;
  padding: 16px;

  .workbenchCard {
    min-height: 300px;
    margin-bottom: 16px;

    .ant-card-head-title {
      font-size: 14px;
    }

    .ant-card-extra {
      font-size: 14px;
    }
  }
`;

const ArticleItem = props => {
  const { title, dataSource, loading, onClick, onMoreClick } = props;
  return (
    <Col span={12}>
      <Card
        title={title}
        extra={
          <a
            href={'javascript:;'}
            onClick={() => {
              if (onMoreClick) {
                onMoreClick();
              }
            }}
          >
            更多
          </a>
        }
        bordered
        className={'workbenchCard'}
      >
        <List
          bordered={false}
          dataSource={dataSource}
          loading={loading}
          renderItem={item => (
            <List.Item>
              <div
                style={{
                  width: '100%',
                  display: 'flex',
                  paddind: '8px',
                }}
              >
                <Typography.Text
                  style={{ color: '#377DB8', cursor: 'pointer' }}
                  onClick={() => {
                    if (onClick) {
                      onClick(item);
                    }
                  }}
                >
                  {item.title}
                </Typography.Text>
                <div
                  style={{
                    flex: '1',
                    textAlign: 'right',
                    marginRight: '8px',
                  }}
                >
                  {moment(item.publishTime).format('YYYY-MM-DD')}
                </div>
              </div>
            </List.Item>
          )}
        />
      </Card>
    </Col>
  );
};

@connect(({ loading }) => ({
  isLoading: loading.effects['articlesetting/listLatestArticles'],
}))
class Workbench extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 最新信息
      datasource4Zxxx: [],
      // 公告通知
      datasource4ggtz: [],
      // 学术天地
      datasource4xstd: [],
      // 工作动态
      datasource4gzdt: [],
      // 文章详情
      record: {},
      // 预览
      previewVisible: false,
      // 更多
      moreVisible: false,
      // 分组编号
      groupId: '',
    };
  }

  componentDidMount() {
    this.listLatestArticles();
  }

  /**
   * 加载首页中需要的文章
   */
  listLatestArticles = () => {
    this.execHttp('articlesetting/listLatestArticles', {})
      .then(resp => {
        const { success, data } = resp;
        if (success) {
          this.setState({
            datasource4Zxxx: data.data4zx,
            datasource4gzdt: data.data4gzdt,
            datasource4ggtz: data.data4ggtz,
            datasource4xstd: data.data4xstd,
          });
        }
      })
      .catch(reason => { });
  };

  render() {
    return (
      <WorkbenchContent>
        <Row gutter={16}>
          <ArticleItem
            title={'最新信息'}
            dataSource={this.state.datasource4Zxxx}
            loading={this.props.isLoading}
            onClick={this.handleArticleClick}
            onMoreClick={() => {
              this.handleMoreClick({ groupId: 1 });
            }}
          ></ArticleItem>
          <ArticleItem
            title={'工作动态'}
            dataSource={this.state.datasource4gzdt}
            loading={this.props.isLoading}
            onClick={this.handleArticleClick}
            onMoreClick={() => {
              this.handleMoreClick({ groupId: 2 });
            }}
          ></ArticleItem>
          <ArticleItem
            title={'公告通知'}
            dataSource={this.state.datasource4ggtz}
            loading={this.props.isLoading}
            onClick={this.handleArticleClick}
            onMoreClick={() => {
              this.handleMoreClick({ groupId: 3 });
            }}
          ></ArticleItem>
          <ArticleItem
            title={'学术天地'}
            dataSource={this.state.datasource4xstd}
            loading={this.props.isLoading}
            onClick={this.handleArticleClick}
            onMoreClick={() => {
              this.handleMoreClick({ groupId: 4 });
            }}
          ></ArticleItem>
        </Row>

        {/*文章详情*/}
        {this.state.previewVisible ? (
          <ArticlePreviewView
            record={this.state.record}
            onClose={this.handlePreviewViewClose}
            visible={this.state.previewVisible}
          ></ArticlePreviewView>
        ) : null}
        {/*更多*/}
        {this.state.moreVisible ? (
          <ArticleListView
            groupId={this.state.groupId}
            onClose={this.handleMoreViewClose}
            visible={this.state.moreVisible}
            onDetailClick={this.handleArticleClick}
          ></ArticleListView>
        ) : null}
      </WorkbenchContent>
    );
  }

  // 文章详情被点击
  handleArticleClick = item => {
    this.setState({
      record: item,
      previewVisible: true
    });
  };

  // 文章详情关闭
  handlePreviewViewClose = () => {
    this.setState({
      previewVisible: false
    });
  };

  // 更多按钮被点击
  handleMoreClick = ({ groupId }) => {
    this.setState({
      moreVisible: true,
      groupId
    });
  };
  // 更多关闭
  handleMoreViewClose = () => {
    this.setState({
      moreVisible: false
    });
  };
}

export default Workbench;
